<template>
    <div class="server-monitor" v-bind="$attrs" v-loading="loading">
        <div class="section">
            <el-row :gutter="20">
                <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                    <CpuUsage :data="monitor?.cpu" />
                </el-col>
                <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                    <MemoryUsage :data="monitor?.mem" />
                </el-col>
            </el-row>
        </div>

        <div class="section">
            <el-row :gutter="20">
                <el-col :span="24">
                    <PythonInfo :data="monitor?.py" />
                </el-col>
            </el-row>
        </div>

        <div class="section">
            <el-row :gutter="20">
                <el-col :span="24">
                    <SystemInfo :data="monitor?.sys" />
                </el-col>
            </el-row>
        </div>

        <div class="section">
            <el-row :gutter="20">
                <el-col :span="24">
                    <DiskUsage :list="monitor?.sys_files ?? []" />
                </el-col>
            </el-row>
        </div>
        <!-- 空状态 -->
        <ElEmpty v-if="!monitor && !loading && !error" description="暂无服务器数据" />
    </div>

</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchServerMonitor, type ServerMonitorModel } from '@/api/system/server'
import SystemInfo from './modules/system-info.vue'
import CpuUsage from './modules/cpu-usage.vue'
import MemoryUsage from './modules/memory-usage.vue'
import DiskUsage from './modules/disk-usage.vue'
import PythonInfo from './modules/python-info.vue'

defineOptions({ name: 'ServerMonitor' })

const loading = ref(false)
const error = ref('')
const monitor = ref<ServerMonitorModel | null>(null)

async function loadData() {
    loading.value = true
    error.value = ''
    try {
        const res = await fetchServerMonitor()
        monitor.value = res
    } catch (e: any) {
        error.value = e?.message || '获取服务器监控数据失败'
    } finally {
        loading.value = false
    }
}

// 刷新按钮已移除，仅保留首次加载

onMounted(() => {
    loadData()
})

</script>

<style scoped>
.server-monitor {
    padding: 12px;
}

.section {
    margin-top: 16px;
}
</style>
